<template>
<div class="card-box">
  <a-card title="订单" style="width: 300px" class="card-box-item">
  <p><span style="font-size: 32px;margin-right: 10px">{{statistics.yesterdayOrder}}</span> 昨日新增订单</p>
  <p><span style="font-size: 32px;margin-right: 10px">{{ statistics.todayOrder }}</span> 今日新增订单</p>
</a-card>
  <a-card title="用户增长" style="width: 300px" class="card-box-item">
    <p><span style="font-size: 32px;margin-right: 10px">{{ statistics.weekUser }}</span> 最近7天新增</p>
    <p><span style="font-size: 32px;margin-right: 10px">{{ statistics.yesterdayUser }}</span> 昨天新增</p>
  </a-card>
  <a-card title="用户" style="width: 300px" class="card-box-item">
    <p><span style="font-size: 32px;margin-right: 10px">{{ statistics.totalUser }}</span> 总用户数</p>
  </a-card>
  <a-card title="订单待发货" style="width: 300px" class="card-box-item">
    <p><span style="font-size: 32px;margin-right: 10px">{{ statistics.waitDelivery }}</span> 待发货</p>
    <template slot="actions" class="ant-card-actions">
     <span>立即处理</span>
    </template>
  </a-card>
  <a-card title="售后待处理" style="width: 300px" class="card-box-item">
    <p><span style="font-size: 32px;margin-right: 10px">{{ statistics.afterSale }}</span> 待售后</p>
    <template slot="actions" class="ant-card-actions">
      <span>立即处理</span>
    </template>
  </a-card>
  <a-card title="退货待处理" style="width: 300px" class="card-box-item">
    <p><span style="font-size: 32px;margin-right: 10px">{{ statistics.returnConfirm }}</span> 待退货</p>
    <template slot="actions" class="ant-card-actions">
      <span>立即处理</span>
    </template>
  </a-card>
  <a-card title="销量排行" style="width: 97%;margin-bottom: 20px;">
    <a slot="extra" href="#"><a-range-picker @change="onChange" :locale="locale"/></a>
    <p>暂无数据</p>
  </a-card>
  <a-card title="注册" style="width: 47%;margin-right: 30px;">
    <a slot="extra" href="#"><a-range-picker @change="onChange" :locale="locale"/></a>
    <p>暂无数据</p>
  </a-card>
  <a-card title="订单" style="width: 47%">
    <a slot="extra" href="#"><a-range-picker @change="onChange" :locale="locale"/></a>
    <p>暂无数据</p>
  </a-card>
</div>
</template>
<script>
import {getHomeStatistics} from '@/api'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default {
  name: "Home",
  data(){
    return{
      locale,
      statistics: {
        totalUser: 0,
        weekUser: 0,
        yesterdayUser: 0,
        yesterdayOrder: 0,
        todayOrder: 0,
        waitDelivery: 0,
        afterSale: 0,
        returnConfirm: 0,
      },
    }
  },
  methods:{
 async getHomeStatisticsFn(){
   const res = await getHomeStatistics()
   console.log(res)
   this.statistics = res.value
},
    onChange(date, dateString) {
      console.log(date, dateString);
    },
  },
  mounted(){
    this.getHomeStatisticsFn()
  }
}
</script>

<style scoped lang="less">
.card-box{
  display: flex;
  flex-wrap: wrap;
  .card-box-item{
    margin: 0 22px 22px 0;
  }
}
</style>
